import React from 'react';
import store from "@/components/17- redux仓库/02- react-redux/store.js";
import {addCarList} from "@/components/17- redux仓库/02- react-redux/carSlice.js";
import {addGoodsList} from "@/components/17- redux仓库/02- react-redux/goodsSlice.js";
import {useDispatch, useSelector} from "react-redux";

const App = () => {
    // useSelector: 获取仓库中的数据
    const carData = useSelector((state) => state.carSlice);
    const goodsData = useSelector((state) => state.goodsSlice);
    // useDispatch: 修改仓库内数据
    const dispatch = useDispatch();

    /**
     * react-redux：cnpm intall react-redux
     *      可以实现仓库中的数据更新，并让视图也更新。
     * src->index.js 使用 Provider 提供仓库信息
     *          import { Provider } from "react-redux";
     *          <Provider store={store}>
     *                  <App/>
     *          </Provider>
     * 钩子函数：
     *         Provider,// 组件  <Provider store={store}></Provider>
     *         useSelector,// 提供了类似于store.getState()
     *         useDispatch,// 提供了类似于store.dispatch
     */

    // 模拟异步请求：
    // const {data} = await axios.get("http://zhangpeiyue.com/weibo",{
    // 	params:{
    // 		pageNo,
    // 		pageSize
    // 	}
    // })
    // dispatch(upContentList(data.contentList));

    // 2- dispatch可以接收同步action(对象->{type,payload}）,也可以接收异步action(函数）.
    // dispatch接收的函数会直接调用
    // dispatch(async function(){
    // 	const {data} = await axios.get("http://zhangpeiyue.com/weibo",{
    // 		params:{
    // 			pageNo,
    // 			pageSize
    // 		}
    // 	})
    // 	dispatch(upContentList(data.contentList));
    // })

    // 3- 异步回调函数接收两个参数：
    //    1- dispatch
    //    2- getState
    // dispatch(async function(dis,getState){
    // 	const {data} = await axios.get("http://zhangpeiyue.com/weibo",{
    // 		params:{
    // 			pageNo,
    // 			pageSize
    // 		}
    // 	})
    // 	dis(upContentList(data.contentList));
    // })

    // 4- 将回调函数作为常量使用
    // const getWeiboAsync = async function(dis,getState){
    // 	const {data} = await axios.get("http://zhangpeiyue.com/weibo",{
    // 		params:{
    // 			pageNo,
    // 			pageSize
    // 		}
    // 	})
    // 	dis(upContentList(data.contentList));
    // }
    // dispatch(getWeiboAsync);

    // 5- 将getWeiboAsync进行柯里化
    // const getWeiboAsync = function(){
    // 	return  async function(dis,getState){
    // 		const {data} = await axios.get("http://zhangpeiyue.com/weibo",{
    // 			params:{
    // 				pageNo,
    // 				pageSize
    // 			}
    // 		})
    // 		dis(upContentList(data.contentList));
    // 	}
    // }
    // dispatch(getWeiboAsync());


    // 6- 将函数抽离至store->slices->weibo.js
    // dispatch(getWeiboAsync(pageNo,pageSize));

    return (
        <div>
            <h3>App</h3>
            <button onClick={() => {

                dispatch(addCarList({
                    id: carData.carList.length + 2,
                    name: `购物车${carData.carList.length + 1}`,
                    price: 222,
                }))
                console.log("购物车2", carData.carList)
            }}>修改购物车数量
            </button>
            {
                carData.carList.map((item, index) => {
                    return (
                        <div key={index}>
                            <div>购物车名字：{item.name}</div>
                            <div>购物车价格：{item.price}</div>
                            <hr/>
                        </div>
                    )
                })
            }
            <hr/>

            <button onClick={() => {
                dispatch(addGoodsList({
                    id: goodsData.goodsList.length + 1,
                    name: `商品${goodsData.goodsList.length + 1}`,
                    price: 222,
                }))
                console.log("store.getState()", goodsData.goodsList.length)
            }}>修改商品数量
            </button>
            {
                goodsData.goodsList.map((item, index) => {
                    return (
                        <div key={index}>
                            <div>商品名字：{item.name}</div>
                            <div>商品价格：{item.price}</div>
                            <hr/>
                        </div>
                    )
                })
            }
        </div>
    );
};

export default App;